<!DOCTYPE html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=GCiVgnTNzGqx2IOy18x59P0dCe2oYq68"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=GCiVgnTNzGqx2IOy18x59P0dCe2oYq68"></script>
        <script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
        <title>热力图功能-tianjiangnan</title>
        <style type="text/css">
            ul,li{list-style: none;margin:0;padding:0;float:left;}
            html{height:100%}
            body{height:100%;margin:0px;padding:0px;font-family:"微软雅黑";}
            #container{height:600px;width:900px;}
            #r-result{width:100%;}
        </style>
    </head>
    <body>
    <div id="container"></div>
    </body>
    </html>

    <script type="text/javascript">
        // var map = new BMap.Map("container");
        // //设置地图的中心点如合肥的坐标
        // var point = new BMap.Point(104.073516,30.579761);
        // // 初始化地图，设置中心点坐标和地图级别
        // map.centerAndZoom(point,8);
        // // 允许滚轮缩放
        // map.enableScrollWheelZoom();
        // //只显示某个省份的关键代码
        // var cityName = '四川省';
        // //添加缩略地图控件
        // map.addControl(new BMap.OverviewMapControl());
        // map.addControl(new BMap.NavigationControl({
        //     type: BMAP_NAVIGATION_CONTROL_LARGE ,
        //     anchor: BMAP_ANCHOR_TOP_LEFT,
        //     offset: new BMap.Size(900, 500)}));
        // var bdary = new BMap.Boundary();
        // bdary.get(cityName, function (rs) {       //获取行政区域
        //     var EN_JW = "180, 90;";         //东北角
        //     var NW_JW = "180,  90;";       //西北角
        //     var WS_JW = "180, 90;";       //西南角
        //     var SE_JW = "180, 90;";        //东南角
        //     //4.添加环形遮罩层
        //     var ply1 = new BMap.Polygon(rs.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW,
        //         { strokeColor: "none", fillColor: "CornflowerBlue", fillOpacity:1, strokeOpacity: 0.5 }); //建立多边形覆盖物
        //     map.addOverlay(ply1);
        // });


        // 百度地图API功能
        var map = new BMapGL.Map('container');
        map.centerAndZoom(new BMapGL.Point(106.259486, 29.348463), 9);
        map.enableScrollWheelZoom();
        var zoomCtrl = new BMapGL.ZoomControl();
        map.addControl(zoomCtrl);

        // --- 添加行政区划 ---
        var dist = new BMapGL.DistrictLayer({
            name: '(重庆市)',
            kind: 1,
            fillColor: '#618bf8',
            fillOpacity: 1,
            strokeColor: '#daeafa',
            viewport: true
        });
        map.addDistrictLayer(dist);

        // --- 行政区划添加鼠标事件 ---
        dist.addEventListener('mouseover', function (e) {
            e.currentTarget.setFillColor('#9169db');
        });
        dist.addEventListener('mouseout', function (e) {
            e.currentTarget.setFillColor(e.currentTarget.style.fillColor);
        });
        var blist = [];
        var districtLoading = 0;
        function getBoundary(){
            var bdary = new BMap.Boundary();
            bdary.get("重庆", function(rs){       //获取行政区域
                map.clearOverlays();        //清除地图覆盖物
                var count = rs.boundaries.length; //行政区域的点有多少个
                for(var i = 0; i < count; i++){
                    var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 0.01, strokeColor: "#ffffff"}); //建立多边形覆盖物
                    map.addOverlay(ply);  //添加覆盖物
                    map.setViewport(ply.getPath());    //调整视野
                }
            });
        }

        setTimeout(function(){
            getBoundary();
        }, 0);


        function getBoundary() {
            addDistrict("渝中区");
            addDistrict("江北区");
            addDistrict("南岸区");
            addDistrict("巴南区");
            addDistrict("渝北区");
            addDistrict("北碚区");
            addDistrict("九龙坡区");
            addDistrict("沙坪坝区");
            addDistrict("大渡口区");
            addDistrict("江津区");
            addDistrict("綦江区");
            addDistrict("合川区");
            addDistrict("璧山区");
            addDistrict("南川区");

        }


        /**
         * 添加行政区划
         * @param {} districtName 行政区划名
         * @returns  无返回值
         */
        function addDistrict(districtName) {
            //使用计数器来控制加载过程
            districtLoading++;
            var bdary = new BMap.Boundary();
            bdary.get(districtName, function (rs) {       //获取行政区域
                var count = rs.boundaries.length; //行政区域的点有多少个
                if (count === 0) {
                    alert('未能获取当前输入行政区域');
                    return;
                }
                for (var i = 0; i < count; i++) {
                    blist.push({ points: rs.boundaries[i], name: districtName });
                };
                //加载完成区域点后计数器-1
                districtLoading--;
                if (districtLoading == 0) {
                    //全加载完成后画端点
                    drawBoundary();
                }
            });
        }


        /**
         * 各种鼠标事件绑定
         */
        function click(evt) {
            alert(evt.target.name);
        }

        function mouseover(evt) {
            evt.target.label.setZIndex(99);
            evt.target.label.setPosition(evt.point);
            evt.target.label.show();
        }

        function mousemove(evt) {
            evt.target.label.setPosition(evt.point);
        }

        function mouseout(evt) {
            evt.target.label.hide();
        }

        function drawBoundary() {
            //包含所有区域的点数组
            var pointArray = [];

            /*画遮蔽层的相关方法
            *思路: 首先在中国地图最外画一圈，圈住理论上所有的中国领土，然后再将每个闭合区域合并进来，并全部连到西北角。
            *      这样就做出了一个经过多次西北角的闭合多边形*/
            //定义中国东南西北端点，作为第一层
            var pNW = { lat: 59.0, lng: 73.0 }
            var pNE = { lat: 59.0, lng: 136.0 }
            var pSE = { lat: 3.0, lng: 136.0 }
            var pSW = { lat: 3.0, lng: 73.0 }
            //向数组中添加一次闭合多边形，并将西北角再加一次作为之后画闭合区域的起点
            var pArray = [];
            pArray.push(pNW);
            pArray.push(pSW);
            pArray.push(pSE);
            pArray.push(pNE);
            pArray.push(pNW);
            //循环添加各闭合区域
            for (var i = 0; i < blist.length; i++) {
                //添加显示用标签层
                var label = new BMap.Label(blist[i].name, { offset: new BMap.Size(20, -10) });
                label.hide();
                map.addOverlay(label);

                //添加多边形层并显示
                var ply;
                if((blist[i].name == "昌平区") ||(blist[i].name == "西城区") ||(blist[i].name == "朝阳区") ){
                    ply = new BMap.Polygon(blist[i].points, { strokeWeight: 2, strokeColor: "#00FF00", fillOpacity: 1, fillColor: "yellow" }); //建立多边形覆盖物

                }else{
                    ply = new BMap.Polygon(blist[i].points, { strokeWeight: 2, strokeColor: "#00FF00", fillOpacity: 1, fillColor: "#eeeeee" }); //建立多边形覆盖物

                }
                //var ply = new BMap.Polygon(blist[i].points, { strokeWeight: 5, strokeColor: "#00FF00", fillOpacity: 1, fillColor: "yellow" }); //建立多边形覆盖物
                switch(blist[i].name){
                    case "昌平区":
                        ply.name = "Changping district";
                        break;
                    case "西城区":
                        ply.name = "Xicheng district";
                        break;
                    case "朝阳区":
                        ply.name = "Chaoyang district";
                        break;
                    case "东城区":
                        ply.name = "Dongcheng district";
                        break;
                    case "丰台区":
                        ply.name = "Fengtai district";
                        break;
                    case "石景山区":
                        ply.name = "Shijingshan district";
                        break;
                    case "海淀区":
                        ply.name = "Haidian district";
                        break;
                    case "门头沟区":
                        ply.name = "Mentougou district";
                        break;
                    case "房山区":
                        ply.name = "Fangshan district";
                        break;
                    case "通州区":
                        ply.name = "Tongzhou district";
                        break;
                    case "顺义区":
                        ply.name = "Shunyi district";
                        break;
                    case "大兴区":
                        ply.name = "Daxing district";
                        break;
                    case "怀柔区":
                        ply.name = "Huairou district";
                        break;
                    case "平谷区":
                        ply.name = "Pinggu district";
                        break;
                    case "密云区":
                        ply.name = "Miyun district";
                        break;
                    case "延庆区":
                        ply.name = "Yanqing district";
                        break;
                }
                //ply.name = blist[i].name;
                ply.label = label;
                ply.addEventListener("click", click);
                ply.addEventListener("mouseover", mouseover);
                ply.addEventListener("mouseout", mouseout);
                ply.addEventListener("mousemove", mousemove);
                map.addOverlay(ply);

                //添加名称标签层
                var centerlabel = new BMap.Label(ply.name, { offset: new BMap.Size(0, 0) });
                centerlabel.setPosition(ply.getBounds().getCenter());
                centerlabel.setStyle({
                    color : "red",
                    fontFamily:"微软雅黑"
                });
                //map.addOverlay(centerlabel);

                //将点增加到视野范围内
                var path = ply.getPath();
                pointArray = pointArray.concat(path);
                //将闭合区域加到遮蔽层上，每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点
                pArray = pArray.concat(path);
                pArray.push(pArray[0]);
            }

            //限定显示区域，需要引用api库
            var boundply = new BMap.Polygon(pointArray);
            BMapLib.AreaRestriction.setBounds(map, boundply.getBounds());
            map.setViewport(pointArray);    //调整视野

            //添加遮蔽层
            var plyall = new BMap.Polygon(pArray, { strokeOpacity: 0.0000001, strokeColor: "#000000", strokeWeight: 0.00001, fillColor: "#000000", fillOpacity: 0.4 }); //建立多边形覆盖物
            map.addOverlay(plyall);
        }

        setTimeout(function () {
            getBoundary();
        }, 100);
    </script>